<template>
  <div class="push-container">
    <div>
      <div class="editor-wrap">
        <!-- 标题、消息类型、接收用户 -->
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="标题" required>
              <el-input
                v-model.trim="title"
                placeholder="请输入标题"
                maxlength="100"
                show-word-limit
                :class="{ 'is-invalid': titleError }"
              />
              <div v-if="titleError" class="error-message">{{ titleError }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="消息类型" required>
              <el-select v-model="messageType" placeholder="请选择消息类型" clearable>
                <el-option
                  v-for="item in messageTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <div v-if="messageTypeError" class="error-message">{{ messageTypeError }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="* 接收用户" required>
              <el-select v-model="recipient" placeholder="请选择接收用户" clearable>
                <el-option
                  v-for="item in recipients"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <div v-if="recipientError" class="error-message">{{ recipientError }}</div>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 富文本编辑器 -->
        <editor class="el-top" v-model="content"></editor>

        <div class="form-wrap">
          <div style="display: flex; justify-content: flex-start">
            <el-button type="primary" @click="submit" style="width: 100px"> 发送 </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { noticeAdd } from '@/api/noticeApi' // 引入 noticeAdd
  import { ApiStatus } from '@/utils/http/status'
  import { ElMessage } from 'element-plus'
  import EmojiText from '@/utils/emojo'
  import type { NoticeParam } from '@/api/model/noticeModel'

  // 表单数据
  const title = ref('') // 标题
  const messageType = ref() // 消息类型
  const recipient = ref() // 接收用户
  const content = ref('') // 内容
  const messageTypes = ref([
    { id: 2, name: '公告' },
    { id: 3, name: '站内信' }
  ]) // 消息类型列表
  const recipients = ref([
    { id: 1, name: '全部用户' },
    { id: 2, name: '商家' },
    { id: 3, name: '普通用户' }
  ]) // 接收用户列表

  // 错误信息
  const titleError = ref('')
  const messageTypeError = ref('')
  const recipientError = ref('')

  // 提交
  const submit = () => {
    // 清除之前的错误信息
    titleError.value = ''
    messageTypeError.value = ''
    recipientError.value = ''

    // 验证输入
    if (!title.value) {
      titleError.value = '请输入标题'
      return
    }

    if (!messageType.value) {
      messageTypeError.value = '请选择消息类型'
      return
    }

    if (!recipient.value) {
      recipientError.value = '请选择接收用户'
      return
    }

    if (!content.value || content.value === '<p><br></p>') {
      ElMessage.error(`请输入消息内容`)
      return
    }

    // 发送消息
    sendNotice()
  }

  // 发送通知
  const sendNotice = async () => {
    try {
      // 创建符合 NoticeParam 结构的对象
      const params: NoticeParam = {
        noticeTitle: title.value,
        noticeType: messageType.value,
        receive: recipient.value,
        noticeContent: content.value
      }

      const res = await noticeAdd(params) // 使用 noticeApi.noticeAdd

      if (res.code === ApiStatus.success) {
        ElMessage.success(`发送成功 ${EmojiText[200]}`)
        resetForm()
      }
    } catch (err) {
      console.error(err)
    }
  }

  // 重置表单
  const resetForm = () => {
    title.value = ''
    messageType.value = null
    recipient.value = null
    content.value = ''
  }
</script>

<style lang="scss" scoped>
  .push-container {
    .editor-wrap {
      max-width: 1000px;
      margin: 20px auto;

      .el-top {
        margin-top: 10px;
      }

      .form-wrap {
        padding: 20px;
        margin-top: 20px;
        background-color: var(--art-main-bg-color);
        border: 1px solid var(--art-border-color);
        border-radius: calc(var(--custom-radius) / 2 + 2px) !important;

        h2 {
          margin-bottom: 20px;
          font-size: 20px;
          font-weight: 500;
        }
      }
    }

    .upload-container {
      .cover-uploader {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        border-radius: 6px;
        transition: var(--el-transition-duration);

        &:hover {
          border-color: var(--el-color-primary);
        }

        .upload-placeholder {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 260px;
          height: 160px;
          border: 1px dashed #d9d9d9;
          border-radius: 6px;

          .upload-icon {
            font-size: 28px;
            color: #8c939d;
          }

          .upload-text {
            margin-top: 8px;
            font-size: 14px;
            color: #8c939d;
          }
        }

        .cover-image {
          display: block;
          width: 260px;
          height: 160px;
          object-fit: cover;
        }
      }

      .el-upload__tip {
        margin-top: 8px;
        font-size: 12px;
        color: #666;
      }
    }
  }

  .error-message {
    color: red;
    font-size: 12px;
    margin-top: 5px;
  }
</style>
